<template>
  <div class="box">
    <header class="header" ref="header">
      <div class="left" @click="$router.back()">
        <van-icon name="arrow-left" size="18"/>
      </div>
      <div class="centerbox">
        <van-field v-model="keyword" placeholder="请输入搜索关键词" />
      </div>
      <div class="right" @click="search">
        <span>搜索</span>
      </div>
    </header>
    <div class="content">
      <van-empty v-if="empty" image="search" description="暂未找到您心仪的产品" />
      <div v-else>
        <van-sticky :offset-top="offsetTop">
          <van-dropdown-menu>
            <van-dropdown-item v-model="priceValue" :options="priceOption" />
            <van-dropdown-item v-model="salesValue" :options="salesOption" />
            <van-dropdown-item title="筛选" ref="item">
              <van-field v-model="min" placeholder="最低价" /> ～
              <van-field v-model="max" placeholder="最高价" />
              <div style="padding: 5px 16px;">
                <van-button type="danger" block round @click="onConfirm">
                  确认
                </van-button>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-sticky>
        <ul :class="num === 1 ? 'prolist col_1' : 'prolist col_2'">
          <router-link tag="li" :to="'/detail?proid=' + item.proid"
          class="proitem" v-for="(item, index) of proList" :key="item.proid">
            <div class="itemImage">
              <img :src="item.img1" alt="">
            </div>
            <div class="itemInfo">
              <p class="van-multi-ellipsis--l2">{{index}} - {{ item.proname }}</p>
              <p>{{ item.originprice }}</p>
              <p>{{ item.sales }}</p>
            </div>
          </router-link>
        </ul>
        <div class="state">
          <van-icon v-if="num === 1" color="#999" name="apps-o" size="24" @click="changeNum(2)"/>
          <van-icon v-else color="#999" name="points" size="24" @click="changeNum(1)"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, DropdownMenu, DropdownItem, Button, Empty, Sticky, Toast } from 'vant'
import { getStorage, setStorage } from '../../utils/storage'
import { getSearchProList } from '@/api/search'
Vue.use(Field)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Button)
Vue.use(Empty)
Vue.use(Sticky)
Vue.use(Toast)
export default {
  data () {
    return {
      keyword: '',
      proList: [],
      copyList: [],
      priceValue: 0,
      salesValue: 0,
      min: '',
      max: '',
      priceOption: [
        { text: '价格默认', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      salesOption: [
        { text: '销量默认', value: 0 },
        { text: '销量升序', value: 1 },
        { text: '销量降序', value: 2 }
      ],
      empty: true,
      num: 2,
      offsetTop: 44 // 粘性布局设置顶部距离
    }
  },
  watch: {
    priceValue (newVal, oldVal) {
      console.log(newVal)
      switch (newVal) {
        case 0:
          this.proList = this.copyList
          break
        case 1:
          this.proList.sort((a, b) => a.originprice - b.originprice)
          break
        case 2:
          this.proList.sort((a, b) => b.originprice - a.originprice)
          break
        default:
          break
      }
    },
    salesValue (newVal, oldVal) {
      console.log(newVal)
      switch (newVal) {
        case 0:
          this.proList = this.copyList
          break
        case 1:
          this.proList.sort((a, b) => a.sales - b.sales)
          break
        case 2:
          this.proList.sort((a, b) => b.sales - a.sales)
          break
        default:
          break
      }
    }
  },
  mounted () {
    // console.log(this.$refs.header.offsetHeight)
    this.offsetTop = this.$refs.header.offsetHeight // 动态js获取header的高度
    this.keyword = this.$route.query.keyword
    getSearchProList({ keyword: this.keyword }).then(res => {
      console.log(res.data)
      if (res.data.code === '10002') { // 未查询到商品，显示空状态
        this.empty = true
      } else {
        this.empty = false
        this.proList = res.data.data
        // 备份数据
        this.copyList = JSON.parse(JSON.stringify(res.data.data))
      }
    })
  },
  methods: {
    changeNum (num) {
      this.num = num
    },
    onConfirm () { // 筛选确定按钮
      // this.$refs.item.toggle()
      // 如果用户什么也没有填写，就是默认的数据
      if (this.min === '' && this.max === '') {
        this.proList = this.copyList
      } else if (this.min === '') {
        this.proList = this.copyList
        this.proList = this.proList.filter(item => item.originprice < this.max)
      } else if (this.max === '') {
        this.proList = this.copyList
        this.proList = this.proList.filter(item => item.originprice > this.min)
      } else {
        this.proList = this.copyList
        this.proList = this.proList.filter(item => item.originprice > this.min && item.originprice < this.max)
      }
      this.priceValue = 0 // 筛选完 排序归位
      this.salesValue = 0 // 筛选完 排序归位
      this.$refs.item.toggle()
    },
    search () { // ["手机", "电脑"]
      if (this.keyword.trim() === '') {
        Toast('请输入搜索的关键词')
        return
      }
      const arr = getStorage('searchList') ? JSON.parse(getStorage('searchList')) : []
      const index = arr.findIndex(item => item === this.keyword)
      if (index === -1) {
        arr.unshift(this.keyword)
      } else {
        arr.splice(index, 1)
        arr.unshift(this.keyword)
      }
      setStorage('searchList', JSON.stringify(arr))
      // 结果页面继续搜索
      getSearchProList({ keyword: this.keyword }).then(res => {
        console.log(res.data)
        if (res.data.code === '10002') { // 未查询到商品，显示空状态
          this.empty = true
        } else {
          this.empty = false
          this.proList = res.data.data
        }
      })
      // 以上代码不能改变地址栏参数
      this.$router.push('/searchresult?keyword=' + this.keyword)
      // 地址改变，数据未改变
    }
  }
}
</script>
<style lang="stylus" scoped>
.van-cell {
  padding 5px 16px
  border-radius 15px
  background-color #f7f7f7
}
.header
  display flex
  color #666
  background-color #fff
  .left
    width 60px
    display flex
    justify-content center
    align-items center
  .centerbox
    flex  1
    display flex
    justify-content center
    align-items center
    .searchbox
      width 100%
      height 30px
      background-color #fff
      border-radius 15px
      text-indent 24px
      line-height 30px
      color #999
  .right
    display flex
    justify-content center
    align-items center
    width 60px
.container .box .header {
    height: 0.44rem;
    background-color: #fff;
}
.prolist
  .proitem
    background-color #fff
    display flex
    height 1.2rem
    .itemImage
      width 1.2rem
      height 1.2rem
      img
        width 1.1rem
        height 1.1rem
        margin 0.05rem
        display block
        // border 1px solid #ccc
    .itemInfo
      padding 5px 10px
      p
        color #333
  &.col_2
    display flex
    flex-wrap wrap
    .proitem
      width 48%
      height 2.4rem
      margin 5px 1%
      display block
      .itemImage
        width 100%
        height 1.5rem
        border 1px solid #ccc
        img
          width 100%
          margin 0
          height 1.5rem
          display block
.state
  width 40px
  height 40px
  background-color #fff
  box-shadow 0 0 3px #666
  border-radius 50%
  position fixed
  bottom 60px
  right 10px
  display flex
  justify-content center
  align-items center
</style>
